
<style>
    body {
        color: #808080;
        font-family:Monospace;
        font-size:13px;
        text-align:center;

        background-color: #ffffff;
        margin: 0px;
        overflow: hidden;
    }

</style>

<body style="position: relative">
<div id="form" style="padding:10%;position: absolute">
    <div class="page-header" >
        <h1>爽了吗小组web大作业 </h1>
        <small>只为最好的你</small>
    </div>
    <div class="input-group">
        <span class="input-group-addon"><i class=" fa fa-phone"></i></span>
        <input type="text" class="form-control" placeholder="手机号" aria-describedby="basic-addon1" ng-model="user.tel">
    </div>

    <div class="input-group">
        <span class="input-group-addon"><i class=" fa fa-user "></i></span>
        <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1" ng-model="user.username">
    </div>

    <div class="input-group">
        <span class="input-group-addon"><i class=" fa fa-eye-slash "></i></span>
        <input type="password" class="form-control" placeholder="密码" aria-describedby="basic-addon1" ng-model="user.password">
    </div>
    <div class="input-group"  ng-click="register()">
        <span class="input-group-addon" style="border-radius:2px">注册</span>
    </div>
    <div>
        <span>已有账号</span>
        <a style="color:black" ng-click="login()">请登陆</a>
    </div>
</div>
<canvas id="debug" style="position:absolute; left:100px"></canvas>


<script src="../lib/threejs/three.js"></script>

<script src="../lib/threejs/Projector.js"></script>
<script src="../lib/threejs/CanvasRenderer.js"></script>

<script src="../lib/threejs/stats.min.js"></script>

<script>

    var container, stats;

    var camera, scene, renderer;

    var geometry, group;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );

    init();
    animate();

    function init() {
        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 500;

        scene = new THREE.Scene();

        var geometry = new THREE.BoxGeometry( 100, 100, 100 );
        var material = new THREE.MeshNormalMaterial( { overdraw: 0.5 } );

        group = new THREE.Group();

        for ( var i = 0; i < 200; i ++ ) {

            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.x = Math.random() * 2000 - 1000;
            mesh.position.y = Math.random() * 2000 - 1000;
            mesh.position.z = Math.random() * 2000 - 1000;
            mesh.rotation.x = Math.random() * 2 * Math.PI;
            mesh.rotation.y = Math.random() * 2 * Math.PI;
            mesh.matrixAutoUpdate = false;
            mesh.updateMatrix();
            group.add( mesh );

        }

        scene.add( group );

        renderer = new THREE.CanvasRenderer();
        renderer.setClearColor( 0xffffff );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        stats = new Stats();
        /*container.appendChild( stats.dom );*/

        //

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function onDocumentMouseMove(event) {

        mouseX = ( event.clientX - windowHalfX ) * 10;
        mouseY = ( event.clientY - windowHalfY ) * 10;

    }

    //

    function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

    }

    function render() {

        camera.position.x += ( mouseX - camera.position.x ) * .05;
        camera.position.y += ( - mouseY - camera.position.y ) * .05;
        camera.lookAt( scene.position );

        var currentSeconds = Date.now();
        group.rotation.x = Math.sin( currentSeconds * 0.0007 ) * 0.5;
        group.rotation.y = Math.sin( currentSeconds * 0.0003 ) * 0.5;
        group.rotation.z = Math.sin( currentSeconds * 0.0002 ) * 0.5;

        renderer.render( scene, camera );

    }

</script>

</body>
</html>
